<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>找回密码</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="找回密码-收取验证码">
  <script type="text/javascript" src="../static/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="../static/res/layui/css/layui.css">
  <link rel="stylesheet" href="../static/res/css/global.css">
</head>

<jsp:include page="fly-head.jsp"></jsp:include>

<div class="layui-container fly-marginTop">
  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title">
        <li class="layui-this">找回密码</li>
      </ul>
      <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
        <div class="layui-tab-item layui-show" style="text-align: center">
          <div style="margin: 0 auto;height: 120px">
            <img src="/images/step2.png">
          </div>
          <div class="layui-form layui-form-pane" style="width: 450px;margin: 0 auto">
            <form>

              <div class="layui-form-item">
                <label for="L_phone" class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                  <input type="text" id="L_phone" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <%--<label for="L_vercode" class="layui-form-label">验证码</label>--%>
                  <%--<div class="layui-input-inline">--%>
                  <%--<input type="text" id="L_vercode" name="vercode" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">--%>
                  <%--</div>--%>
                <div class="layui-form-item">
                  <label for="L_PhoneVercode" class="layui-form-label">手机验证码</label>
                  <div class="layui-input-inline" style="float: left;">
                    <input type="text" id="L_PhoneVercode" name="L_PhoneVercode" required
                           lay-verify="required" placeholder="短信验证码" autocomplete="off"
                           class="layui-input" >
                    <span id="phoneVercodeNull" style="color: red; margin-left:5px; float:left;"></span>
                  </div>
                  <div>
                    <input style="width: 95px;height: 37px" id="btn-getPhone" onclick="getPhoneSms()"
                           value="获取验证码" type="button">
                  </div>
                </div>
              </div>

                <span id="showTrue" style="color: red; margin-left:190px; float:left;"></span>
                <br></br>

              <div class="layui-form-item">
                <button class="layui-btn" alert="1" lay-filter="*" lay-submit onclick="ForgetVerifyPhone();return false">提交</button>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
<jsp:include page="fly-footer.jsp"></jsp:include>

<script src="../static/res/layui/layui.js"></script>
<script>
<%--获取url中参数--%>
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var URL =  decodeURI(window.location.search);
        var r = URL.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    };
    //验证码
    function changeImg() {
        var img = document.getElementById("img");
        img.src = "${ctx}/authImage?date=" + new Date();
        ;
    }


    <%--获取手机验证码--%>
    var dataPhone;
    function getPhoneSms() {
        var phone = document.getElementById("L_phone").value;
        var username = GetQueryString("username");
        if ($("#L_phone").val() == "") {
            alert("手机号不能为空");
            $("#L_phone").focus();
            return false;
        };
        $.ajax({
            url: "/userAdmin/adminForgetGetSmsVerify",
            type: "post",
            dataType: "json",
            data: {
                "phone": phone,
                "username":username
            },
            success: function (data) {
                if (data.msg == "该手机号已被注册") {
                    alert(data.msg);

                }else if (data.msg=="验证码已发送"){
                    //发送成功后开始倒计时
                    $("#L_PhoneVercode").focus();
                    var timer = null;
                    var sec = 60;
                    $('#btn-getPhone').attr('disabled', 'disabled');
                    timer = setInterval(function () {
                        sec--;
                        $('#btn-getPhone').val(+sec + 's后重发送');
                        if (sec == 0) {
                            clearInterval(timer);
                            $('#btn-getPhone').val('重新发送');
                            $('#btn-getPhone').removeAttr('disabled');
                        }
                    }, 1000);
                }

            }
        });

    }
    //验证码验证方法
    $('#L_PhoneVercode').blur(function yanzhengma() {
            var L_PhoneVercode = $("#L_PhoneVercode").val();
            if (L_PhoneVercode == "") {
                $('#showTrue').text("");
                return false
            }
            $.ajax({
                url: "/userAdmin/ForgetSmsVerifyJudge",
                type: "post",
                dataType: "json",
                data: {
                    "L_PhoneVercode": L_PhoneVercode,
                },
                success: function (data) {
                    var dataType = data;
                    if (dataType == 1) {
                        $('#showTrue').text("验证码正确");
                    } else if (dataType == 0) {
                        $('#showTrue').text("验证码错误");
                    } else {
                        $('#showTrue').text("系统出错，请稍后再试");

                    }
                }
            });

        }
    );
    //验证验证码并跳转
    function ForgetVerifyPhone() {
        if ($("#L_phone").val() == "") {
            alert("手机号不能为空");
            $("#L_phone").focus();
            return false;
        }
        if ($("#L_vercode").val() == "") {
            alert("验证码不能为空");
            $("#L_vercode").focus();
            return false;
        }
        $.ajax({
            url: "/userAdmin/ForgetVerifyPhone",
            type: "post",
            dataType: "json",
            data: {
            },
            success: function (data) {
                var dataType = data;
                if (dataType == 1) {
                    window.location.href="/admin/adminForgetSet3.jsp"
                } else if (dataType == 0) {
                    $('#showTrue').text("验证码错误");
                }
            }
        });

    }
</script>

</body>
</html>